<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="data-source-main">
    <div class="source-search">
      <div class="types">
        <div class="item" v-for="item in types" :class="{ 'item-active': item.active }" :key="item.name" @click="queryByType(item.name)">
          {{ item.name }}
        </div>
      </div>
      <div class="query">
        <el-input placeholder="请输入数据源名称" size="small" v-model="sourceName" clearable />
        <el-button type="primary" size="small" style="margin-left: 10px" @click="queryByName">查询</el-button>
      </div>
    </div>
    <div class="source-list" v-loading="loading">
      <div class="item item-first" @click="addSource" v-if="queryParams.pageNum === 1">
        <img :src="plus" />
      </div>
      <div class="item" v-for="item in sources" :key="item">
        <div class="name">{{ item.dataSourceName }}</div>
        <div class="info">
          <div class="left">
            <img :src="item.imgSrc" alt="" style="height: 80px; width: 80px" />
          </div>
          <div class="right">
            <div>类型：{{ item.dataSourceType }}</div>
            <div>描述：{{ item.dataSourceDescriptive }}</div>
          </div>
        </div>
        <div class="bottom">
          <el-button size="small" link type="primary" @click="editSource(item)">编辑</el-button>
          <el-button size="small" link type="primary" @click="deleteSource(item)">删除</el-button>
        </div>
      </div>
    </div>
    <div class="pagenation">
      <el-pagination
        v-show="total > 0"
        layout="prev, pager, next,jumper"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <AddScource v-if="addVisible" :addVisible="addVisible" @handleEvent="handleEvent" :data="editData" :type="editType" />
  </div>
</template>

<script name="dataSource" setup>
import Oracle from '@/assets/images/dataSource/oracle.svg';
import Doris from '@/assets/images/dataSource/Doris.svg';
import FTP from '@/assets/images/dataSource/ftp.svg';
import MongoDB from '@/assets/images/dataSource/mongoDB.svg';
import MySQL from '@/assets/images/dataSource/Mysql.svg';
import API from '@/assets/images/dataSource/rest_api.svg';
import plus from '@/assets/images/dataSource/Plus.svg';
import AddScource from './component/AddScource.vue';
import { getDataSourceList, deleteDataSource } from '@/api/dataIntegration/dataSource/index';
const queryParams = ref({
  pageNum: 1,
  pageSize: 11
});
const loading = ref(false);
const total = ref(0);
const types = ref([
  { name: '全部', active: true },
  { name: 'MySQL', active: false },
  { name: 'Oracle', active: false },
  { name: 'Doris', active: false },
  { name: 'FTP', active: false },
  { name: 'MongoDB', active: false },
  { name: 'API', active: false }
]);
const sources = ref([]);
const addVisible = ref(false);
const editData = ref(null);
const editType = ref('add');
const queryType = ref('');
const sourceName = ref('');
//新增
const addSource = () => {
  editData.value = null;
  addVisible.value = true;
  editType.value = 'add';
};
const handleEvent = (data) => {
  addVisible.value = false;
  if (data?.type === 'refresh') {
    doQuery();
  }
};
//修改
const editSource = (param) => {
  editData.value = param;
  addVisible.value = true;
  editType.value = 'edit';
};
//删除
const deleteSource = (param) => {
  ElMessageBox.confirm('是否确认删除该数据源？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //执行删除
    deleteDataSource(param?.id).then((res) => {
      ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
      doQuery();
    });
  });
};
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  doQuery();
};
//查询数据源列表
const doQuery = () => {
  const type = queryType.value;
  if (type === '全部') {
    queryType.value = '';
  }
  loading.value = true;
  sources.value = [];
  // if (queryParams.value.pageNum > 1) {
  //   queryParams.value.pageSize = 12;
  // }else{
  //   queryParams.value.pageSize = 11;
  // }
  getDataSourceList({
    dataSourceType: queryType.value,
    dataSourceName: sourceName.value,
    pageSize: queryParams.value.pageSize,
    pageNum: queryParams.value.pageNum
  })
    .then((res) => {
      if (res) {
        sources.value = res?.rows;
        total.value = res?.total;
        // 处理展示图片
        sources.value.forEach((el) => {
          if (el.dataSourceType === 'Oracle') {
            el.imgSrc = Oracle;
          } else if (el.dataSourceType === 'MySQL') {
            el.imgSrc = MySQL;
          } else if (el.dataSourceType === 'Doris') {
            el.imgSrc = Doris;
          } else if (el.dataSourceType === 'FTP') {
            el.imgSrc = FTP;
          } else if (el.dataSourceType === 'MongoDB') {
            el.imgSrc = MongoDB;
          } else if (el.dataSourceType === 'API') {
            el.imgSrc = API;
          }
        });
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const queryByType = (type) => {
  queryType.value = type;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 11;
  types.value.forEach((item) => {
    if (item.name === type) {
      item.active = true;
    } else {
      item.active = false;
    }
  });
  doQuery();
};
const queryByName = () => {
  doQuery();
};
onMounted(() => {
  doQuery();
});
</script>

<style lang="scss" scoped>
.data-source-main {
  width: 100%;
  height: calc(100vh - 84px);
  padding: 10px;
  overflow: auto;
  .source-search {
    display: flex;
    padding: 5px;
    border: 1px solid #d9d9d9;
    .types {
      display: flex;
      .item {
        margin-right: 10px;
        width: 80px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 10px;
        color: #409eff;
        font-size: 14px;
        border: 1px solid #409eff;
        cursor: pointer;
      }
      .item-active {
        background: #409eff;
        color: white;
      }
    }
    .query {
      display: flex;
      align-items: center;
    }
  }
  .source-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 104px);
    overflow-y: auto;
    align-content: flex-start;
    .item {
      height: 180px;
      background: #fff;
      border: 1px solid #d9d9d9;
      margin: 0 0 10px 10px;
      flex: 0 0 32%;
      border-radius: 10px;
      box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.1);
      padding: 10px;
      .name {
        font-size: 14px;
      }
      .info {
        margin-top: 10px;
        display: flex;
        align-items: center;
        height: calc(100% - 50px);
        font-size: 12px;
        .right {
          margin-left: 20px;
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        justify-content: end;
      }
    }
    .item-first {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      > img {
        height: 120px;
        width: 120px;
      }
    }
  }
  .pagenation {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>